

<template>
  <div>
    <div>
      <tab>
        <tab-item selected @on-item-click="onItemClick">已领材料</tab-item>
        <tab-item @on-item-click="onItemClick">已用材料</tab-item>
        <tab-item @on-item-click="onItemClick">回退材料</tab-item>
        <tab-item @on-item-click="onItemClick">剩余材料</tab-item>
      </tab>
      <br>
      <br>
    </div>
    <!-- 已领材料 -->
    <div v-show="ylcl">
      <x-table>
        <thead>
          <tr>
            <th>光猫</th>
            <th>机顶盒</th>
            <th>分光器</th>
            <th>尾纤</th>
            <th>皮线</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(date,index) in ldate" :key="index">
             <td >{{date.gm}}</td>
           <td >{{date.jdh}}</td>
            <td >{{date.fgq}}</td>
             <td >{{date.wq}}</td>
              <td >{{date.px}}</td>
          </tr>
        </tbody>
      </x-table>
      <br>
      <group>
        <datetime v-model="date.lksrq" format="YYYY-MM-DD" title="开始日期"></datetime>
        <datetime v-model="date.ljzrq" format="YYYY-MM-DD" title="截至日期"></datetime>
      </group>
      <x-button type="primary" @click.native="lgetDate">搜索</x-button>
    </div>
    <!-- 已用材料 -->
    <div v-show="yycl">
      <x-table>
        <thead>
          <tr>
            <th>光猫</th>
            <th>机顶盒</th>
            <th>分光器</th>
            <th>尾纤</th>
            <th>皮线</th>
          </tr>
        </thead>
        <tbody>
          <tr  v-for="(date, index) in ydate" :key="index">
          <td >{{date.gm}}</td>
           <td >{{date.jdh}}</td>
            <td >{{date.fgq}}</td>
             <td >{{date.wq}}</td>
              <td >{{date.px}}</td>
          </tr>
        </tbody>
      </x-table>
      <br>
      <group>
        <datetime v-model="date.yksrq" format="YYYY-MM-DD" title="开始日期"></datetime>
        <datetime v-model="date.yjzrq" format="YYYY-MM-DD" title="截至日期"></datetime>
      </group>
      <x-button type="primary" @click.native="ygetDate">搜索</x-button>
    </div>
    <!-- 回退材料 -->
    <div v-show="htcl">
      <x-table>
        <thead>
          <tr>
            <th>光猫</th>
            <th>机顶盒</th>
            <th>分光器</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(date, index) in hdate" :key="index">
            <td >{{date.gm}}</td>
           <td >{{date.jdh}}</td>
            <td >{{date.fgq}}</td>
          </tr>
        </tbody>
      </x-table>
      <br>
      <group>
        <datetime v-model="date.hksrq" format="YYYY-MM-DD" title="开始日期"></datetime>
        <datetime v-model="date.hjzrq" format="YYYY-MM-DD" title="截至日期"></datetime>
      </group>
      <x-button type="primary" @click.native="hgetDate">搜索</x-button>
    </div>
    <!-- 剩余材料 -->
    <div v-show="sycl">
      <x-table>
        <thead>
          <tr>
            <th>光猫</th>
            <th>机顶盒</th>
            <th>分光器</th>
            <th>尾纤</th>
            <th>皮线</th>
          </tr>
        </thead>
        <tbody>
        <tr  v-for="(date, index) in sdate" :key="index">
          <td >{{date.gm}}</td>
           <td >{{date.jdh}}</td>
            <td >{{date.fgq}}</td>
             <td >{{date.wq}}</td>
              <td >{{date.px}}</td>
          </tr>
        </tbody>
      </x-table>
      <br>
      <group>
        <datetime v-model="date.sksrq" format="YYYY-MM-DD" title="开始日期"></datetime>
        <datetime v-model="date.sjzrq" format="YYYY-MM-DD" title="截至日期"></datetime>
      </group>
      <x-button type="primary" @click.native="sgetDate">搜索</x-button>
    </div>
  </div>
</template>
<script>
import { Tab, TabItem } from "vux";
import { XTable } from "vux";
import { Datetime } from "vux";
import { Group, XButton } from "vux";
export default {
  components: {
    Tab,
    TabItem,
    XTable,
    Datetime,
    Group,
    XButton
  },
  data() {
    return {
      ylcl: true, //已领材料
      yycl: false, //已用材料
      htcl: false, //回退材料
      sycl: false, //剩余材料
      ksrq: "", //开始日期·
      jzrq: "" ,//截止日期
      ldate:"",
       hdate:"",
        ydate:"",
         sdate:"",
         date:{}
    };
  },
  mounted(){
    // this.getData(1)
    // this.getWg()
 this.lgetDate()
this.hgetDate()
this.ygetDate()
this.sgetDate()
  },
  methods: {
    //点击切换页面
    onItemClick(index) {
      if (index == 0) {
        //点击已领材料

        (this.ylcl = true),
          (this.sycl = false),
          (this.htcl = false),
          (this.yycl = false);
      }
      if (index == 1) {
        //点击已用材料
      
        (this.yycl = true),
          (this.ylcl = false),
          (this.htcl = false),
          (this.sycl = false);
        var date = new Date();
        console.log("默认日期", date);
      }
      if (index == 2) {
        //点击回退材料
        (this.htcl = true),
          (this.yycl = false),
          (this.sycl = false),
          (this.ylcl = false);
      }
      if (index == 3) {
        //点击剩余材料材料
        (this.sycl = true),
          (this.htcl = false),
          (this.yycl = false),
          (this.ylcl = false);
      }

      console.log("on item click:", index);
    },
    //根据日期查找对应材料
    search() {
      console.log(date);
    },
    //获取数据
lgetDate(){

 this.$post("/api/WxClckControllere/lList",this.date,(data) => {
               this.ldate=data.list;    
                
                })
},
hgetDate(){

 this.$post("/api/WxClckControllere/hList",this.date,(data) => {
               this.hdate=data.list;    
                
                })
},
ygetDate(){

 this.$post("/api/WxClckControllere/yList",this.date,(data) => {
               this.ydate=data.list;    
                
                })
},
sgetDate(){

 this.$post("/api/WxClckControllere/sList",this.date,(data) => {
               this.sdate=data.list;    
                
                })
}
       
  }
};
</script>
<style>
</style>

